<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CockroachDB Schema Change Visualizer</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.min.js" integrity="sha512-9H86d5lhAwgf2/u29K4N5G6pZThNOojI8kMT4nT4NHvVR02cM85M06KJRQXkI0XgQWBpzQyIyr8LVomyu1AQdw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-dispatch/1.0.3/d3-dispatch.min.js" integrity="sha512-GwGc3FdHAsypfFtHmlC5/1XmPHCgX29eF+hnB3yibq57ics37q32zWvVAiKQNaJ8g7/oJprzTUctywTGMefvWg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-format/1.3.0/d3-format.min.js" integrity="sha512-NfQctkWh4Pxf1zN7UctlZ8fsYxNf/2CPPzyCjBqAJ5HpkXt8vpcWRUnXSZ3/+qEK/aDFiz5A2j73ymrlpKK6Bw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-interpolate/1.3.0/d3-interpolate.min.js" integrity="sha512-xvW6UjrAtx4v7637oau6tLNnO99t+VvI9CvJBK0FMMoaplK63xAu+tvLZ6h1kYia58br4lfEo8ou90ptIUvoKw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-dispatch/1.0.3/d3-dispatch.min.js" integrity="sha512-GwGc3FdHAsypfFtHmlC5/1XmPHCgX29eF+hnB3yibq57ics37q32zWvVAiKQNaJ8g7/oJprzTUctywTGMefvWg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-path/1.0.5/d3-path.min.js" integrity="sha512-QK4s19Nm3EEmeryOWb3XdgZfXQt96SRHalzoeX9DE7qYnORxw8aoPH4F2t9uyVVNiObeVmYOdP0BWXx2ic7O/Q==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.min.js" integrity="sha512-P/PLNIojUNrUq2g5Q3NX8epp5X6KZmNvWV2pDGU+ZiU96YlqFhIrG0pkSZ/qgruT7uJ2Ok/vFN7/7brl4Y7ipw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-transition/1.1.1/d3-transition.min.js" integrity="sha512-9EoVFaJ1f642H4qLe+VUMu7CDqa1FQPdar1Pm76aS1AeesQoMdmm3NUZaZlJ1H/IEpwfS1Hbq41l/iUmhxq8jw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-timer/1.0.7/d3-timer.min.js" integrity="sha512-ngcq6H/a6TrQ4Ft0TNEnRKFmyjAIy8skQJkNjFkXC1qjUyasSfYsfITdDeDyVkQz6pRvJh/GrtuQtKutKNxhJQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-zoom/1.7.1/d3-zoom.min.js" integrity="sha512-NrNejGiQgUB+TA42pQ4GlKf+pB2a/cHaoX+Jg+DI0Hr5JlLv31T8ewiFoL8YnlxocmtJaYrkedZkXVlDRJOs6w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-graphviz/3.1.0/d3-graphviz.min.js" integrity="sha512-xDh+TOcWBsd00MmoBRuZvRwwiWj1sQonBPxIriVzrP6ea/3dQGSv4AY8h7dJkU1tFeEJrPgsQfvk4iVjFjQVtw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.2/pako.min.js" integrity="sha512-IjkvjWp4tSkhkQRb9gFwCcMhBWZLPKc7Zo8ifb6qxORyehV072QgRVG3F0fwAaJh0fnEFNLc2+XggoC5wvW24g==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@1.20.0/dist/index.min.js" type="application/javascript/"></script>
<script>
  async function doRender() {
    const urlParams = new URLSearchParams(window.location.search);
    if (!window.location.hash) {
      return;
    }
    const graph = window.location.hash.substring(1);
    const data = await fetch(`data:application/octet-stream;charset=utf-8;base64,${graph}`);
    const blob = await data.blob();
    const ab = await blob.arrayBuffer();
    const inflated = pako.inflate(ab);
    const text = new TextDecoder("utf-8").decode(inflated);
    console.log(text);
    const body = d3.select("body").node();
    d3.select("#graph").graphviz()
      .width(body.clientWidth)
      .height(body.clientHeight)
      .fit(true)
      .dot(text)
      .render();
  }
</script>
<body style="width: 100vw; height: 100vh; margin: 0px;" onload="doRender()" onresize="doRender()">
<div id="graph" style="width: 100%; height: 100%"></div>
</body>
</html>
